<template>
	<div class="star" :class="starType">
		<span v-for="itemClass in itemClasses" :class="itemClass" class="star-item"></span>
	</div>
</template>

<script>
	const length=5;
	const s_on='on';
	const s_off='off';
	const s_half='half';
	export default {
		props:['size','score'],
		computed:{
			starType:function(){
				return 'star-'+this.size;
			},
			itemClasses:function(){
				var result=[];
				var score=Math.floor(this.score*2)/2;
				var hasDecimal=score%1!==0;
				var integer=Math.floor(score);
				for(var i=0;i<integer;i++){
					result.push(s_on);
				}
				if(hasDecimal){
					result.push(s_half);
				}
				while(result.length<length){
					result.push(s_off);
				}
				return result;
			}
		}
	}
</script>

<style>
	.star{
		font-size: ;
	}
	.star-item{
		display: inline-block;
		background-repeat: no-repeat;
	}
	.star-48 .star-item{
		width: 20px;
		height: 20px;
		margin-right: 22px;
		background-size: 20px 20px;
	}
	.star-48 .star-item.on{
		background-image: url(star48_on@2x.png);
	}
	.star-48 .star-item.off{
		background-image: url(star48_off@2x.png);
	}
	.star-48 .star-item.half{
		background-image: url(star48_half@2x.png);
	}
	.star-36 .star-item{
		width: 15px;
		height: 15px;
		margin-right: 6px;
		background-size: 15px 15px;
	}
	.star-36 .star-item.on{
		background-image: url(star36_on@2x.png);
	}
	.star-36 .star-item.off{
		background-image: url(star36_off@2x.png);
	}
	.star-36 .star-item.half{
		background-image: url(star36_half@2x.png);
	}
	.star-24 .star-item{
		width: 10px;
		height: 10px;
		margin-right: 3px;
		background-size: 10px 10px;
	}
	.star-24 .star-item.on{
		background-image: url(star24_on@2x.png);
	}
	.star-24 .star-item.off{
		background-image: url(star24_off@2x.png);
	}
	.star-24 .star-item.half{
		background-image: url(star24_half@2x.png);
	}
</style>